import { selfBuiltListAdd, selfBuiltListEdit, selfBuiltListInfo } from "@/services/aigcUser";
import { Form, Input, Modal, message } from "antd";
import React from "react";
import { formatMessage } from "umi-plugin-react/locale";

class UserUpdate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      title: "",
      info: null,
    };
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this);
    }
  }

  doInit = (id, title) => {
    this.setState(
      {
        visible: true,
        title,
      },
      () => {
        if (id) {
          this.getInfo(id);
        }
      }
    );
  };

  getInfo = async (id) => {
    const res = await selfBuiltListInfo({ id });
    this.setState({
      info: res,
    });
    this.props.form.setFieldsValue({
      nickName: res.nickName,
      name: res.userName,
      email: res.email,
      mobilePhone: res.mobilePhone,
    });
  };

  doCancel = () => {
    this.setState(
      {
        visible: false,
        info: null,
      },
      () => {
        this.props.form.resetFields();
      }
    );
  };

  okValidate = () => {
    const that = this;
    that.props.form.validateFields((error, values) => {
      if (!error) {
        that.doOk(values);
      }
    });
  };

  doOk = async (values) => {
    const { info } = this.state;
    let res = {};
    if (info) {
      res = await selfBuiltListEdit({
        ...values,
        id: info.id,
        categoryId: this.props.currentNode.info.id,
        disabled: info.disabled,
      });
    } else {
      res = await selfBuiltListAdd({
        ...values,
        categoryId: this.props.currentNode.info.id,
      });
    }

    if (res.code == -1) {
    } else {
      message.info(res.message);
      this.doCancel();
      this.props.doRefresh();
    }
  };

  checkField(rule, value, callback) {
    if (rule.field === "name") {
      const reg = /^[0-9a-zA-Z_.@-]{1,}$/g;
      if (value) {
        if (reg.test(value)) {
          if (value.length > 30 || value.length < 6) {
            callback(
              formatMessage({
                id: "selfBuiltAccount.userUpdate.form.userNameValidation",
              })
            );
          } else {
            callback();
          }
        } else {
          callback(
            formatMessage({
              id: "selfBuiltAccount.userUpdate.form.userNameValidation",
            })
          );
        }
      } else {
        callback(
          formatMessage({
            id: "selfBuiltAccount.userUpdate.form.userNameValidation",
          })
        );
      }
    }
    if (rule.field === "password") {
      const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/;
      if (value) {
        if (reg.test(value)) {
          if (value.length > 30 || value.length < 6) {
            callback(formatMessage({ id: "selfBuiltAccount.userUpdate.form.passwordValidation" }));
          } else {
            callback();
          }
        } else {
          callback(formatMessage({ id: "selfBuiltAccount.userUpdate.form.passwordValidation" }));
        }
      } else {
        callback("支持8-20位大小写字母和数字");
      }
    }
  }

  render() {
    const { visible, title, info } = this.state;
    const {
      form: { getFieldDecorator },
    } = this.props;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    return (
      <Modal
        visible={visible}
        onCancel={this.doCancel}
        onOk={this.okValidate}
        okText={formatMessage({ id: "selfBuiltAccount.userUpdate.modal.okText" })}
        cancelText={formatMessage({ id: "selfBuiltAccount.userUpdate.modal.cancelText" })}
        title={title}
      >
        <Form {...formItemLayout}>
          <Form.Item label={formatMessage({ id: "selfBuiltAccount.userUpdate.form.nickName" })}>
            {getFieldDecorator("nickName", {
              rules: [
                {
                  required: true,
                  message: formatMessage({ id: "selfBuiltAccount.userUpdate.form.nickNameRequired" }),
                },
              ],
            })(<Input />)}
          </Form.Item>
          <Form.Item label={formatMessage({ id: "selfBuiltAccount.userUpdate.form.userName" })}>
            {getFieldDecorator("name", {
              rules: [
                {
                  required: true,
                  message: formatMessage({ id: "selfBuiltAccount.userUpdate.form.userNameRequired" }),
                },
                { validator: this.checkField },
              ],
            })(<Input disabled={info ? true : false} autoComplete="new-user" />)}
          </Form.Item>
          {info ? (
            ""
          ) : (
            <Form.Item label={formatMessage({ id: "selfBuiltAccount.userUpdate.form.password" })}>
              {getFieldDecorator("password", {
                rules: [
                  {
                    required: true,
                    message: formatMessage({ id: "selfBuiltAccount.userUpdate.form.passwordRequired" }),
                  },
                  { validator: this.checkField },
                ],
              })(<Input.Password autoComplete="new-password" />)}
            </Form.Item>
          )}
          <Form.Item label={formatMessage({ id: "selfBuiltAccount.userUpdate.form.email" })}>
            {getFieldDecorator("email", {
              rules: [
                {
                  required: true,
                  pattern: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
                  message: formatMessage({ id: "selfBuiltAccount.userUpdate.form.emailInvalid" }),
                },
              ],
            })(<Input />)}
          </Form.Item>
          <Form.Item label={formatMessage({ id: "selfBuiltAccount.userUpdate.form.mobilePhone" })}>
            {getFieldDecorator("mobilePhone", {
              rules: [
                {
                  required: false,
                  pattern: /^1[3-9]\d{9}$/,
                  message: formatMessage({ id: "selfBuiltAccount.userUpdate.form.mobilePhoneInvalid" }),
                },
              ],
            })(<Input />)}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

export default Form.create()(UserUpdate);
